<template>
	<div>
		<van-empty class="custom-image" :image="src" description="购物车为空,没有产品" v-if="!goods_info.length" />
		<div class="goods_id" v-if="goods_info.length">
			<van-card :price="item.g_price+'.00'" :title="item.g_name" :thumb="$url+item.g_picture"
				v-for="(item,index) in goods_info" :key='index'>
				<template #footer>
					<van-stepper v-model="item.g_count" @change="goodscar(item)" />
					<van-icon name="delete-o" size="18px" @click='delgoods(index)' />
				</template>
			</van-card>
		</div>
		<van-submit-bar :price="num*100" button-text="确认订单" @submit="onSubmit" text-align="left"
			:disabled="!goods_info.length"></van-submit-bar>
	</div>
</template>

<script>
	import Vue from 'vue';

	import {
		Stepper
	} from 'vant';
	import {
		Icon
	} from 'vant';

	Vue.use(Icon);
	Vue.use(Stepper);
	import {
		Card
	} from 'vant';
	import {
		tag
	} from 'vant'
	Vue.use(tag)
	Vue.use(Card);
	import {
		Empty
	} from 'vant';

	Vue.use(Empty);
	export default {
		inject: ['reload'],
		components: {},
		data() {
			return {
				src: require('../../../assets/imgs/gouwuche.png'),
				// goods_info: []
				num: 0,
				g_count: 0
			}
		},
		props: {
			goods_info: []
		},
		methods: {
			goodscar(item) {
				this.$http.post('/goodscar/goodscar', {
					g_name: item.g_name,
					g_picture: item.g_picture,
					g_price: item.g_price,
					g_count: item.g_count,
					g_id: item.g_id,
					u_id: this.$store.state.u_id
				}).then(res => {
					// console.log('123')
				})
				setTimeout(() => {
					this.$http.get('/goodscar/carinfo', {
						u_id: this.$store.state.u_id
					}).then(res => {
						// 计算总价
						this.num = 0
						this.g_count = 0
						for (var i = 0; i < JSON.parse(res.data.data[0].goods_info).length; i++) {
							this.num += JSON.parse(res.data.data[0].goods_info)[i].g_price * JSON.parse(res
								.data.data[0].goods_info)[i].g_count
						}
					})
				}, 300)
			},
			delgoods(index) {
				var a = confirm('确认删除')
				if (a) {
					this.$http.post('/goodscar/del', {
						index,
						u_id: this.$store.state.u_id
					}).then(res => {
						console.log(res.data)
					})
					//无刷新provide和inject实现页面刷新（无白屏）重载组件
					this.reload()
					// this.$router.go(0)
				}
			},
			onSubmit() {
				this.$http.get('/goodscar/carinfo', {
					u_id: this.$store.state.u_id
				}).then(res => {
					let goodss_info = JSON.parse(res.data.data[0].goods_info)
					// 计算总价
					let total = 0
					let count = 0
					let name = ''
					for (var i = 0; i < goodss_info.length; i++) {
						//总价
						total += goodss_info[i].g_price * goodss_info[i].g_count
						//总数量
						count += goodss_info[i].g_count
						//名称
						if (i < 1) {
							name += goodss_info[i].g_name + ' '
						} else {
							name += '...'
							break;
						}
					}
					sessionStorage.setItem('goods', JSON.stringify({
						g_info: goodss_info,
						u_id: this.$store.state.u_id
					}))
				})
				setTimeout(() => {
					this.$router.push('/Confirm?id=' + this.$store.state.u_id)
				}, 600)
			},
		},
		mounted() {
			this.$http.get('/goodscar/carinfo', {
				u_id: this.$store.state.u_id
			}).then(res => {
				// 计算总价
				for (var i = 0; i < JSON.parse(res.data.data[0].goods_info).length; i++) {
					this.num += JSON.parse(res.data.data[0].goods_info)[i].g_price * JSON.parse(res.data.data[0]
						.goods_info)[i].g_count
				}
			})
		},
	}
</script>

<style scoped="scoped">
	.goods_id {
		position: fixed;
		overflow-y: auto;
		top: 3.5rem;
		bottom: 6.25rem;
		width: 100%;
	}

	.van-icon-delete-o {
		position: absolute;
		top: 0.625rem;
		right: 0.625rem;
	}

	.no_reco {
		padding: 10px;
		text-align: center;
		margin-top: 150px;
		font-size: 24px;
		background-color: #fff;
	}

	.custom-image .van-empty__image {
		width: 90px;
		height: 90px;
	}

	.van-empty {
		padding: 10rem 0;
		width: 100%;
		top: 0;
		position: fixed;
		bottom: 0;
	}

	.van-card__title {
		font-size: 14px;
		font-weight: 600;
		max-height: 3.125rem;
		line-height: 3.125rem;
	}

	.van-submit-bar {
		bottom: 3.25rem;
		position: absolute;
		z-index: 1 !important;
	}
</style>
